<!DOCTYPE html>
<html>
  <head>
    <!-- 标题及搜索关键字 -->

    <link rel="shortcut icon" type="image/x-icon" href="https://muyao1987.gitee.io/cdn/marsgis.cn/favicon/favicon.ico" />
    <title>功能示例 | Mars3D | 三维地图 | 火星科技 | 合肥火星科技有限公司</title>

    <!--第三方lib-->
    <script
      type="text/javascript"
      src="/lib/include-lib.js"
      libpath="/lib/"
      include="jquery,layer,toastr,font-awesome,ztree,jquery.minicolors,jedate,bootstrap,bootstrap-table,bootstrap-checkbox,bootstrap-slider,layer,haoutil,toastr,mars3d,font-awesome,localforage"
    ></script>

    <link href="/css/style.css" rel="stylesheet" />
    <style>
      .fixed-table-container tbody .selected td {
        background-color: #3f4854a9 !important;
      }
    </style>
  </head>

  <body class="dark">
    <div id="mars3dContainer" class="mars3d-container"></div>

    <!-- 面板 -->
    <div class="infoview" style="overflow: auto; max-height: 850px">
      <table class="mars-table">
        <tbody>
          <tr>
            <td>简单文本：</td>
            <td>
              <input id="txtUrl" type="text" value="" required class="form-control" placeholder="请输入" />
            </td>
          </tr>

          <tr>
            <td>下拉框：</td>
            <td>
              <select id="txtCrs" class="selectpicker form-control">
                <option value="" selected="selected">默认</option>
                <option value="EPSG:3857">火星</option>
                <option value="EPSG:4326">地球</option>
                <option value="EPSG:4490">太阳</option>
              </select>
            </td>
          </tr>

          <tr>
            <td class="nametd">日期：</td>
            <td>
              <input type="text" class="form-control" id="txtStartTime" placeholder="YYYY-MM-DD" />
            </td>
          </tr>

          <tr>
            <td>进度条：</td>
            <td class="slider">
              <input
                id="slider_brightness"
                type="text"
                data-slider-min="-0.5"
                data-slider-max="1.5"
                data-slider-step="0.01"
                data-slider-value="-0.5"
              />
            </td>
          </tr>

          <tr>
            <td>刻度进度条：</td>
            <td class="slider">
              <input id="slider_showLevel" type="text" />
            </td>
          </tr>

          <tr>
            <td>地图交互：</td>
            <td>
              <input type="text" name="" id="txtRectangle" class="form-control" value="" style="width: 150px" readonly />
              <input id="btnStartDraw" type="button" class="btn btn-primary" value="绘制" onclick="onDrawExtent()" />
              <!-- <input id="btnStartClear" type="button" class="btn btn-primary" value="清除" onclick="onClearExtent()" /> -->
            </td>
          </tr>

          <tr>
            <td>多选：</td>
            <td class="slider">
              <div class="checkbox checkbox-primary checkbox-inline">
                <input id="showGoHome" class="styled" type="checkbox" onclick="fireStar()" />
                <label for="showGoHome"> 火星 </label>
              </div>

              <div class="checkbox checkbox-primary checkbox-inline">
                <input id="showSceneModePicker" class="styled" type="checkbox" onclick="earthStar()" />
                <label for="showSceneModePicker"> 地球 </label>
              </div>

              <div class="checkbox checkbox-primary checkbox-inline">
                <input id="showBaseLayerPicker" class="styled" type="checkbox" onclick="sunStar()" />
                <label for="showBaseLayerPicker"> 太阳 </label>
              </div>
            </td>
          </tr>

          <tr>
            <td>单选：</td>
            <td>
              <div class="radio radio-info radio-inline">
                <input type="radio" id="shadingMaterials1" name="shadingMaterials" onclick="chooseStar()" checked />
                <label for="shadingMaterials1">火星</label>
              </div>
              <div class="radio radio-info radio-inline">
                <input type="radio" id="shadingMaterials2" name="shadingMaterials" onclick="chooseStar()" />
                <label for="shadingMaterials2">地球</label>
              </div>
              <div class="radio radio-info radio-inline">
                <input type="radio" id="shadingMaterials3" name="shadingMaterials" onclick="chooseStar()" />
                <label for="shadingMaterials3">太阳</label>
              </div>
            </td>
          </tr>
          <tr>
            <td>颜色：</td>
            <td colspan="2">
              <input type="text" id="txtColor" class="form-control" style="width: 100px" value="#FF0000" />
            </td>
          </tr>

          <tr>
            <td>弹窗：</td>
            <td id="tdViewAdd" colspan="2" style="text-align: left">
              <input type="button" class="btn btn-primary" value="提示信息" onclick="messageOut()" />
              <input type="button" class="btn btn-primary" value="Notify弹窗" onclick="Warning()" />
              <input type="button" class="btn btn-primary" value="Alert弹窗" onclick="Alert()" />
            </td>
          </tr>

          <tr>
            <td>进度条：</td>
            <td id="tdViewAdd" colspan="2" style="text-align: left">
              <input type="button" class="btn btn-primary" value="进度条" onclick="jinDuTiao()" />
            </td>
          </tr>

          <tr>
            <td colspan="2">
              <!-- table表格控件 -->
              <table id="listTable"></table>
            </td>
          </tr>

          <tr>
            <td colspan="2">
              <!-- tree树控件 -->
              <ul id="treeOverlays" class="ztree"></ul>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="/js/common.js"></script>
    <script src="./map.js"></script>
    <script type="text/javascript">
      "use script" //开发环境建议开启严格模式

      let $table

      function initUI(options) {
        // 树控件
        mars3d.Util.fetchJson({ url: "../config/tileset.json" })
          .then(function (data) {
            initTree(data.layers)
          })
          .catch(function (error) {
            console.log("加载JSON出错", error)
          })

        // eslint-disable-next-line no-undef
        jeDate("#txtStartTime", {
          theme: {
            bgcolor: "#135b91",
            pnColor: "#00CCFF"
          },
          format: "YYYY-MM-DD hh:mm:ss",
          zIndex: 20210825
        })
        let now = Cesium.JulianDate.toDate(map.clock.currentTime)
        $("#txtStartTime").val(now.format("yyyy-MM-dd HH:mm:ss"))

        //获取台风列表
        mars3d.Util.fetchJson({
          url: "//data.mars3d.cn/file/apidemo/typhoon/list_2020.json",
          data: {
            t: new Date().getTime()
          }
        })
          .then(function (res) {
            const arr = typhoon_jsons_list_default(res)
            //启动正在发送的台风
            arr.forEach((item) => {
              if (item.state == "start") {
                item.show = true
                selectOneTyphoon(item)
              }
            })
            showTyphoonTable(arr)
          })
          .catch(function (error) {
            console.log("加载JSON出错", error)
          })

        $("#slider_lodLevel")
          .slider({
            id: "slider-lodLevel-internal",
            ticks: [0, 5, 10, 15, 18, 21],
            ticks_positions: [0, 20, 40, 60, 80, 100],
            ticks_labels: ["0", "5", "10", "15", "18", "21"],
            range: true,
            value: [0, 21]
          })
          .on("slide", function () {
            let lodLevel = $("#slider_lodLevel").slider("getValue")
            $("#slider_showLevel").slider("setValue", lodLevel)
          })

        $("#slider_showLevel")
          .slider({
            id: "slider-showLevel-internal",
            ticks: [-25, 2, 4, 6, 8, 9],
            ticks_positions: [0, 20, 40, 60, 80, 100],
            ticks_labels: ["0", "20", "40", "60", "80", "100"],
            range: true,
            value: [-25, 9]
          })
          .on("change", function () {
            updateBrightness(Number($("#slider_showLevel").val()[0] / 50))
          })

        // 调整亮度 （演示滑动条）
        $("#slider_brightness")
          .slider()
          .on("change", function () {
            updateBrightness(Number($("#slider_brightness").val()))
          })

        $("#slider_opacity")
          .slider()
          .on("change", function () {
            // console.log(e);
          })

        $("#txtColor").minicolors({
          position: "bottom right",
          control: "saturation",
          change: function (color, opacity) {
            console.log(color)
          }
        })

        $("#txtCrs").change(function () {
          const txtCrs = $("#txtCrs").val()
          toastr.info(txtCrs)
        })
      }

      function fireStar() {
        if ($("#showGoHome").is(":checked")) {
          toastr.info("火星被选中了")
        }
      }

      function earthStar() {
        if ($("#showSceneModePicker").is(":checked")) {
          toastr.info("地球被选中了")
        }
      }

      function sunStar() {
        if ($("#showBaseLayerPicker").is(":checked")) {
          toastr.info("太阳被选中了")
        }
      }

      function chooseStar() {
        if ($("#shadingMaterials1").is(":checked")) {
          toastr.info("火星被选中了")
        } else if ($("#shadingMaterials2").is(":checked")) {
          toastr.info("地球被选中了")
        } else if ($("#shadingMaterials3").is(":checked")) {
          toastr.info("太阳被选中了")
        }
      }

      function messageOut() {
        globalMsg("展示Message信息")
      }
      function Alert() {
        globalAlert("我是Alert提示信息内容", "提示Alert标题")
      }
      function Warning() {
        globalNotify("提示Notify标题", "我是Notify提示信息内容")
      }

      function jinDuTiao() {
        haoutil.loading.show()
        setTimeout(function () {
          haoutil.loading.close()
        }, 1000)
      }

      // 瓦片数据的矩形区域范围
      function onDrawExtent() {
        drawExtent()
      }
      eventTarget.on("drawExtent", function (event) {
        $("#txtRectangle").val(event.extent)
      })

      //清除图层限定范围
      // function onClearExtent() {
      //   $("#txtRectangle").val("")
      //   map.graphicLayer.clear()
      // }

      //显示台风列表
      function showTyphoonTable(data) {
        $("#listTable").bootstrapTable({
          data: data,
          height: 300,
          pagination: false,
          singleSelect: false,
          checkboxHeader: false,
          columns: [
            {
              title: "是否显示",
              field: "show",
              align: "center",
              checkbox: true,
              with: 50
            },
            {
              title: "台风编号",
              field: "typnumber",
              align: "center"
            },
            {
              title: "台风名（中文）",
              field: "name_cn",
              align: "center"
            },
            {
              title: "台风名（英文）",
              field: "name_en",
              align: "center"
            }
          ],
          onCheck: function (row) {
            selectOneTyphoon(row)
          },
          onUncheck: function (row) {
            unSelectOneTyphoon(row)
          },
          onClickRow: function (row) {
            if (typhoonListObj[row.id] && typhoonListObj[row.id].show) {
              selectOneTyphoon(row)
            }
          }
        })
      }

      let typhoonListObj = {}

      //取消勾选台风
      function unSelectOneTyphoon(row) {
        let typhoon = typhoonListObj[row.id]
        if (typhoon == selectTF) {
          $("#typhoonPath").hide()
        }
      }

      //勾选了台风
      function selectOneTyphoon(row) {
        $("#lblName").html("[" + row.typnumber + "]" + "" + row.name_cn)
        toastr.info(row.name_cn + "台风要来啦，大家要注意安全！")
      }

      let selectTF

      function getHeight() {
        return $(window).height() - 440
      }

      function typhoon_jsons_list_default(data) {
        let arr = []
        data.typhoonList.forEach((item) => {
          arr.push({
            id: item[0],
            name_en: item[1],
            name_cn: item[2],
            typnumber: item[3],
            state: item[7]
          })
        })
        return arr
      }

      //转换数据,将后端接口数据转换为需要的格式
      function conversionPathData(oldData) {
        let path = []
        oldData[8].forEach((message) => {
          let circle7
          let circle10
          let circle12
          message[10].forEach((level) => {
            let radiusObj = {
              speed: level[0],
              radius1: level[1],
              radius2: level[2],
              radius3: level[3],
              radius4: level[4]
            }

            if (level[0] == "30KTS") {
              circle7 = radiusObj
            } else if (level[0] == "50KTS") {
              circle10 = radiusObj
            } else if (level[0] == "64KTS") {
              circle12 = radiusObj
            } else {
              console.log("未处理风圈", radiusObj)
            }
          })
        })
      }

      //===========================树控件处理============================
      let layers = []
      let layersObj = {}

      function initTree(layers) {
        //初始化树
        let setting = {
          check: {
            enable: true
          },
          data: {
            simpleData: {
              enable: true
            }
          },
          callback: {
            onCheck: treeOverlays_onCheck,
            onDblClick: treeOverlays_onDblClick
          }
        }

        let zNodes = []
        for (let i = layers.length - 1; i >= 0; i--) {
          let layerOptions = layers[i]
          layerOptions.flyTo = true
          let layer = mars3d.LayerUtil.create(layerOptions) //创建图层

          let node = _getNodeConfig(layer)
          if (node) {
            zNodes.push(node)
          }
        }
        $.fn.zTree.init($("#treeOverlays"), setting, zNodes)
      }

      function _getNodeConfig(layer) {
        if (layer == null || layer.options.noLayerManage) {
          return
        }

        let item = layer.options

        if (item.name == "未命名") {
          return
        }

        let node = {
          id: layer.id,
          pId: layer.pid,
          name: layer.name,
          uuid: layer.uuid
        }

        if (layer.hasEmptyGroup) {
          //空数组
          node.icon = "/lib/jquery/ztree/css/mars/images/folder.png"
          node.open = item.open == null ? true : item.open
          layersObj[node.uuid] = layer
        } else if (layer.hasChildLayer) {
          //有子节点的数组
          node.icon = "/lib/jquery/ztree/css/mars/images/layerGroup.png"
          node.open = item.open == null ? true : item.open
          layersObj[node.uuid] = layer
        } else {
          node.icon = "/lib/jquery/ztree/css/mars/images/layer.png"
          node.checked = layer.isAdded && layer.show

          if (layer.parent) {
            node._parentId = layer.parent.uuid
          }

          //记录图层
          layersObj[node.uuid] = layer
        }
        return node
      }

      function treeOverlays_onCheck(e, treeId, chktreeNode) {
        let treeObj = $.fn.zTree.getZTreeObj(treeId)
        //获得所有改变check状态的节点
        let changedNodes = treeObj.getChangeCheckedNodes()

        haoutil.array.remove(changedNodes, chktreeNode)
        changedNodes.push(chktreeNode)

        for (let i = changedNodes.length - 1; i >= 0; i--) {
          let treeNode = changedNodes[i]
          treeNode.checkedOld = treeNode.checked

          if (treeNode.check_Child_State == 1) {
            // 0:无子节点被勾选,  1:部分子节点被勾选,  2:全部子节点被勾选, -1:不存在子节点 或 子节点全部设置为 nocheck = true
            continue
          }

          let layer = layersObj[treeNode.uuid]
          if (layer == null) {
            continue
          }

          //显示隐藏透明度设置view
          if (treeNode.checked) {
            $("#" + treeNode.tId + "_range").show()
          } else {
            $("#" + treeNode.tId + "_range").hide()
          }

          updateLayerShow(layer, treeNode.checked)
        }
      }

      //更新图层:显示隐藏状态
      function updateLayerShow(layer, show) {
        layer.show = show

        if (show) {
          if (!layer.isAdded) {
            map.addLayer(layer)
          }
          // layer.flyTo();
        } else {
          if (layer.isAdded) {
            map.removeLayer(layer)
          }
        }
      }

      function treeOverlays_onDblClick(event, treeId, treeNode) {
        if (treeNode == null || treeNode.uuid == null) {
          return
        }
        let layer = layersObj[treeNode.uuid]
        if (layer == null || !layer.layer) {
          haoutil.msg("图层尚未加载，需要加载后才能定位！")
          return
        }

        layer.flyTo()
      }
    </script>
  </body>
</html>
